<!--
用法: <advert-img :list="list" :advertWidth="300"></advert-img>

一张图的时候  也就是横幅类型(type=1) 的时候是没有定位的  需要自己放在相对应的位置
广告的类型：
0 轮播
1 横幅
2 两张
3 三张
4 四张

轮播图类型的广告需要用到iview

list:数据   advertWidth:广告的宽   adverHeight:广告的高

list 例子
list: {
              id: '1', type: '1', name: "cc腾讯广告", position: '1', status: "0", date: '2016-10-03',
              advert_list: [{
                  img_url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1554286459783&di=59dc0d1d0c7353b2530b9847fac70980&imgtype=jpg&src=http%3A%2F%2Fimg.mp.itc.cn%2Fupload%2F20170127%2F3c25a0ee9317420b936fb000820def69_th.jpeg',
                  href: 'http://www.baidu.com'
              }
              ]
          }

-->

<template>
    <div class="adver-box" v-if="isShow" :class="{'adver-fixed':list.type != 0}" :style="[styleSize,itemPosition]">
        <div class="close" v-if="list.type !=1" @click="close">
            关闭
        </div>
        <div class="adver" v-if="list.type != 0">
            <ul class="clear-float">
                <li class="advert-item"  v-for="(item,index) in list.advert_list" :key="index+0" :class="(index == 2 && list.type == 3) || list.type ==1 ? 'advert-item-100':''">
                    <a  target="blank" :href="item.href">
                        <img :src="item.img_url"/>
                    </a>
                </li>
            </ul>
        </div>

        <div class="banner-box"  v-if="list.type == 0">
            <i-carousel autoplay  :autoplay-speed="3000"  v-model="bannerIndex" loop>
                <i-carouselItem v-for="(item,index) in list.advert_list" :key="index">
                    <div class="demo-carousel">
                        <a  target="blank" :href="item.href">
                            <img :src="item.img_url"/>
                        </a>
                    </div>
                </i-carouselItem>
            </i-carousel>
        </div>
    </div>

</template>

<script>
    import {Carousel,CarouselItem} from 'iview'
    export default {
        name: "advert-img",
        props:{
            list:{
                default:[]
            },
            advertWidth:{
                default:200
            },
            adverHeight:{
                default:200
            }
        },
        data(){
            let _this = this
            return{
                bannerIndex:0,
                isShow:true,
                styleSize:{
                    width:_this.list.type == 1 ? "100%": _this.advertWidth + "px",
                    height:_this.adverHeight + "px"
                }
            }
        },
        methods:{
          close(){
              this.isShow = false
          }
        },
        computed:{
            itemPosition(){
                let type = this.list.type
                let pos = this.list.position
                if(type !=1){
                    let position ={}
                    if(pos ==1){
                        position.top ="30px"
                        position.right = '0'
                    }else if(pos ==2){
                        position.bottom ="0"
                        position.right = '0'
                    }else if(pos ==3){
                        position.top ="45%"
                        position.left = '0'
                    }else if(pos ==4){
                        position.top ="45%"
                        position.right = '0'
                    }
                    return position

                }else {
                    return {position: 'relative'}
                }
            }
        },
        components:{
            ICarousel:Carousel,
            ICarouselItem:CarouselItem
        }
    }
</script>

<style scoped>
    .adver-box{
        z-index: 5000;
        overflow-x: hidden;
        overflow-y: auto;
        width: 100%;
        position: relative;
    }
    .close{
        position: absolute;
        right: 0;
        top: 0;
        background-color:rgba(0,0,0,0.8);
        font-size: 12px;
        padding: 5px 10px;
        color: #f9f9f9;
        cursor: pointer;
        z-index: 1000;
    }
    .adver-fixed{
        position: fixed;
    }
    .clear-float{
        clear:both
    }

    .clear-float:before{
        display: table;
        content: '';
    }
    .clear-float:after{
        display: table;
        content: '';
    }
    .advert-item{
        width: 47%;
        float: left;
        display: block;
        padding-bottom: 20px;
    }
    .advert-item-100{
        display: block;
        width: 100%;
    }
    .advert-item a{
        display: block;
    }
    .advert-item img {
        width: 100%;
    }
   .advert-item:nth-of-type(2n){
        float: right;
    }
    .demo-carousel{
        width: 100%;
        height: auto;
        background-color: bisque;
    }
    .banner-box{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }
    .demo-carousel a{
        display: block;
        width: 100%;
        height: 100%;
    }
    .demo-carousel a img{
        width: 100%;
    }
</style>